<template>
  <div class="orders-index">
    <div class="orders-index-header">
      <order-button :Edit="Edit" :Delete="Delete" :handleEdit="handleEdit" :handleDelete="handleDelete" />
    </div>
    <div class="orders-index-body">
      <div class="select-input">
        <el-select v-model="value" class="m-2" placeholder="Dro" size="large">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="search-input">
        <el-input v-model="input" placeholder="Search" />
      </div>
    </div>
    <div class="orders-index-content">
      <!-- 表格 -->
      <orders-table :tableData="pageTableData" :handleSelectionChange="handleSelectionChange" />

      <!-- 分页 -->
      <div class="example-pagination-block">
        <orders-pagination :total="tableData.length" :pageSize="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  import OrderButton from '@/components/button/ComponentsButton.vue'
  import OrdersPagination from '@/components/pagination/ComponentsPagination.vue'
  import OrdersTable from '@/components/table/ComponentsTable.vue'

  import { Delete, Edit } from '@element-plus/icons-vue'
  import { ElMessage, ElMessageBox } from 'element-plus'

  const value = ref(``)
  const input = ref(``)
  const selectedItems = ref([])
  const options = [
    {
      value: `Option1`,
      label: `Option1`,
    },
    {
      value: `Option2`,
      label: `Option2`,
    },
    {
      value: `Option3`,
      label: `Option3`,
    },
    {
      value: `Option4`,
      label: `Option4`,
    },
    {
      value: `Option5`,
      label: `Option5`,
    },
  ]
  const tableData = ref([
    {
      date: `2016-05-03`,
      name: `Tom`,
      color: `#12512B`,
      address: `No. 189, Grove St, Los Angeles`,
      tag: `Home`,
    },
    {
      date: `2016-05-02`,
      name: `Tom`,
      color: `#12512B`,
      address: `No. 189, Grove St, Los Angeles`,
      tag: `Home`,
    },
    {
      date: `2016-05-04`,
      name: `Tom`,
      color: `#12512B`,
      address: `No. 189, Grove St, Los Angeles`,
      tag: `Home`,
    },
    {
      date: `2016-05-01`,
      name: `Tom`,
      color: `#12512B`,
      address: `No. 189, Grove St, Los Angeles`,
      tag: `Home`,
    },
  ])
  const pageSize = ref(2)
  const currentPage = ref(1)

  const hasSelectedItems = computed(() => selectedItems.value.length > 0)
  /**
   * 编辑
   * @param {*} val
   */

  const handleEdit = (val) => {
    if (hasSelectedItems.value) {
      console.log(`编辑`, val)
    }
  }

  /**
   * 删除
   * @param {*} val
   */
  const handleDelete = () => {
    if (hasSelectedItems.value) {
      ElMessageBox.confirm(`Are you sure you want to delete 4 selected items?`, `Delete Items`, {
        confirmButtonText: `Delete`,
        cancelButtonText: `Cancel`,
        confirmButtonClass: `btnFalses`,
        type: `danger`,
      })
        .then(() => {
          // 清除不包括selectedItems.value
          tableData.value = tableData.value?.filter((item) => !selectedItems.value.includes(item))
          selectedItems.value = []
          // eslint-disable-next-line new-cap
          ElMessage({
            type: `success`,
            message: `Delete completed`,
          })
        })
        .catch(() => {
          // eslint-disable-next-line new-cap
          ElMessage({
            type: `info`,
            message: `Delete canceled`,
          })
        })
    }
  }

  /**
   *
   * @param {*} val
   */
  const handleSelectionChange = (val) => {
    console.log(val)
    selectedItems.value = val
  }
  // 每页显示数量
  const pageTableData = computed(() => {
    const startIndex = (currentPage.value - 1) * pageSize.value
    const endIndex = startIndex + pageSize.value

    return tableData.value.slice(startIndex, endIndex)
  })
  const handleSizeChange = (val) => {
    console.log(`size`, val)
    pageSize.value = val
  }
  const handleCurrentChange = (val) => {
    console.log(`current`, val)
    currentPage.value = val
  }
</script>

<style lang="scss" scoped>
  .orders-index {
    max-height: calc(100vh - 4.25rem);
    opacity: 1;
    border-radius: 4px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 4px rgba(21, 34, 50, 0.08);
    margin: 1rem;
    .orders-index-header {
      display: flex;
      justify-content: flex-end;
    }
    .orders-index-body {
      display: flex;
      align-items: center;
      :deep(.el-input__inner::placeholder) {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: rgba(161, 167, 196, 1);
        text-align: left;
        vertical-align: top;
      }

      .select-input,
      .search-input {
        :deep(.el-input__wrapper) {
          height: 2rem;
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 24px;
          color: rgba(161, 167, 196, 1);
          text-align: left;
          vertical-align: top;
        }
      }
      .select-input {
        :deep(.el-input__wrapper) {
          width: 10rem;
        }
      }
      .search-input {
        margin-left: 1rem;
        :deep(.el-input__wrapper) {
          width: 20rem;
        }
      }
    }
    .orders-index-content {
      margin: 1rem;

      :deep(.el-table .cell) {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 20px;
        color: rgba(19, 21, 35, 1);
        text-align: left;
        vertical-align: top;
      }
    }
  }
</style>

<style>
  .btnFalses {
    border: red;
    background: red !important;
  }
</style>
